<template>
  <div class="bottom">
    <div class="left">
      <img src="../assets/img/logo_bottom.png" alt="" />
      <!-- <p>
        <img src="../assets/img/bottom_weibo.svg" alt="" />
        <img src="../assets/img/bottom_wechat.svg" alt="" />
        <img src="../assets/img/bottom_shipinhao.svg" alt="" />
      </p> -->
    </div>
    <div class="right">
      <div class="right-top">
        <span>关于我们</span><span>品牌荣誉</span><span>荣叔拾味</span
        ><span>荣叔真选</span><span>餐厅预订</span><span>新闻消息</span
        ><span>招聘信息</span>
      </div>
      <div class="right-center">
        地址：北京市朝阳区百子湾南二路 77 号新荣记办公楼 3 层
        <br />电话：0756-85117797 18612880825
      </div>

      <div class="right-bottom">
        <span
          >Copyright © 2024 新荣记. All Rights Reserved.
          沪ICP备20020449号-2</span
        >
        <span class="logo">
          <img src="../assets/img/bottom_weibo.svg" alt="" />
          <img src="../assets/img/bottom_wechat.svg" alt="" />
          <img src="../assets/img/bottom_shipinhao.svg" alt=""
        /></span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bottom {
  height: 500px;
  background: #e8e8e8;
  padding: 74px 140px 170px 140px;
  display: flex;
  justify-content: space-between;
  font-family: Helvetica, Helvetica;
  font-size: 20px;
  .left {
    img {
      height: 100%;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 117px;
    justify-content: space-between;
    .right-top {
      font-weight: 400;
      color: #535353;
      display: flex;
      justify-content: space-between;
      margin-right: 40px;
    }
    .right-center {
      line-height: 1.8;
      font-weight: 400;
      color: #535353;
    }
    .right-bottom {
      font-family: Helvetica, Helvetica;
      font-weight: 400;
      color: #aaaaaa;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      span:first-child {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        flex: 1;
      }
      span.logo {
        margin-left: 10px;
        img {
          height: 50px;
          margin-left: 20px;
        }
      }
    }
  }
}

@media (min-width: 1920px) {
  .bottom {
    font-size: 20px;
    height: 500px;
    padding: 74px 140px 170px 140px;
    .right {
      margin-left: 117px;
      .right-bottom {
        .right-bottom {
          span.logo {
            img {
              height: 50px;
              margin-left: 20px;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1441px) and (max-width: 1919px) {
  .bottom {
    font-size: 20px;
    height: 450px;
    padding: 64px 120px 150px 120px;
    .right {
      margin-left: 107px;
      .right-bottom {
        span.logo {
          img {
            height: 45px;
            margin-left: 20px;
          }
        }
      }
    }
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .bottom {
    font-size: 17px;
    height: 400px;
    padding: 54px 80px 100px 80px;
    .right {
      margin-left: 97px;
      .right-bottom {
        span.logo {
          img {
            height: 40px;
            margin-left: 15px;
          }
        }
      }
    }
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .bottom {
    font-size: 16px;
    height: 350px;
    padding: 54px 70px 100px 70px;
    .right {
      margin-left: 87px;
      .right-bottom {
        span.logo {
          img {
            height: 30px;
            margin-left: 8px;
          }
        }
      }
    }
  }
}

@media (max-width: 991px) {
  .bottom {
    font-size: 16px;
    height: 300px;
    padding: 34px 60px 80px 60px;
    .right {
      margin-left: 77px;
      .right-bottom {
        span.logo {
          img {
            height: 30px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
